<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
 
<head>
<title>Select Dependiente jQuery Ajax</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Abrahan Apaza" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="procesar.js"></script>
<?php
  include("configuracion.inc.php");
$link=conectar($bd_host,$bd_usuario,$bd_pwd,$bd_nombre);
  $c=mysql_query("select * from pais",$link);
?>
<style>
    body{text-align:center;font-family:Arial;}
    #muestra{
        width:400px;
        margin:0 auto;
    }
    #muestra div{
        display:block;
        text-align:left;
        overflow:hidden;
        border-bottom:1px solid #ccc;
        padding:3px;
    }
    #muestra div label{
        padding:7px 10px;
        width:150px;
        display:block;
        float:left;
    }
    #muestra div select{
        float:left;
        padding:3px;
        margin-top:4px;
    }
</style>
</head>
<body>
<div id="muestra">
<form action="">
    <div>
    <label>Pais: </label>
    <select id="pais">
      <option value="">- Seleccione Pais -</option>
     <?php while($r=mysql_fetch_array($c)){
        echo "<option value=".$r['idpais'].">".$r['nombre_pais']."</option>";
      } ?>
    </select>
 </div>
 <div>
 <label>Provincia: </label>
 <select id="provincia" disabled="disabled"> </select>
 <img id="imgprovincia" style="display: none;" src="loading.gif" alt="Cargando" />
 </div>
 <div>
 <label>Ciudad: </label>
 <select id="ciudad" disabled="disabled"> </select>
 <img id="imgciudad" style="display: none;" src="loading.gif" alt="Cargando" />
 </div>
 <button id="enviar">Enviar</button>
 </form>
 
 </div>
</body>
</html>